<template>
  <div class="Calendarbox">
      <el-calendar ref="calendar" v-mobel="value" style="height: 540px;">
          <!-- <template v-slot:header> this父组件，把这段template放在子组件的header插槽里-->
          <!-- 作用域插槽. -->
          <template #header="{ date }">
              <div class="leftbutton">
                  <el-button size="small" @click="selectDate('prev-year')">
                      <span>&lt&lt</span>
                  </el-button>
                  <el-button size="small" @click="selectDate('prev-month')">
                      <span>&lt</span>
                  </el-button>
              </div>
              <div class="middlebutton">
                  <el-button size="small" @click="selectDate('today')">
                      {{ date }}
                  </el-button>
              </div>
              <div class="rightbutton">
                  <el-button size="small" @click="selectDate('next-month')">
                      &lt
                  </el-button>
                  <el-button size="small" @click="selectDate('next-year')">
                      &lt&lt
                  </el-button>
              </div>
          </template>
          <!-- 通过设置名为 date-cell 的 scoped-slot 来自定义日历单元格中显示的内容。 在 scoped-slot 可以获取到 date（当前单元格的日期）, data（包括 type，isSelected，day 属性）。 -->
          <template #date-cell="{ data }">
              <div style="display: flex;flex-direction: row;">
                  <div>
                      {{ data.day.split("-").slice(2).join("-") }}
                  </div>
                  <div v-for="i in kaoqin">
                      <div v-if="data.day.split('-').slice(2)==i.day">
                          <div>
                              <span :class="Wcolors.Wcolor(i.state[0])">{{i.state[0]}}</span>
                          </div>
                          <div>
                              <span :class="Wcolors.Wcolor(i.state[1])">{{i.state[1]}}</span>
                          </div>
                      </div>
                  </div>
              </div>
          </template>
      </el-calendar>
  </div>
</template>

<script setup>
/**
* 组件 - 考勤日历（动态加载数据）
*/
import { ref } from 'vue';
import { kaoqin } from '@/assets/student/schedule/container.png';
import Wcolors from '@/assets/student/schedule/container.png';
//别名.(方法)

const calendar = ref()
const selectDate = (val) => {
  calendar.value.selectDate(val)
}
</script>
<style>
.Calendarbox{

  width: 90%;
  margin: auto;
  margin-top: 30px;
  padding: 20px 20px 0 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.el-calendar__body {
  padding: 12px 20px 2px !important;
}
</style>
